<template>
  <div class="main_app">
    <el-collapse v-model="collapseActiveName" accordion>
      <el-collapse-item name="custom" title='custom'>
        <!-- <div class="display-flex algin-items-center" style="width:100%">
          <div style="width: 100%;">
            <el-input v-model="baseUrl" placeholder="输入后台请求地址" />
          </div>
          <div style="margin-left:10px">
            <el-button type="primary" @click="changeBaseUrl">确 定</el-button>
          </div>
        </div>
        <el-divider content-position="left">配置填充列表</el-divider> -->
        <div>
          <div style="margin:10rpx"><el-button type="primary" round @click="addHandle">新增</el-button>
          </div>
          <div style="margin: 10px;max-height:400px;overflow: auto;">
            <div v-if="addShow" style="margin:10px">
              <urlForm :form="curForm" @confirm="addConfirm" @cancel="cancel" />
            </div>
            <div v-for="(i, idx) in confList" :key="idx" style="">
              <div class="url-item display-flex algin-items-center">
                <el-tag class="mx-1" type="warning" effect="dark" round>
                  {{ idx + 1 }}
                </el-tag>
                <div style="margin-left:3px">{{ i.url }}</div>
                <div style="margin-left:auto">
                  <el-button type="success" round @click="updateHandle(i)">修改</el-button>
                </div>
              </div>
              <div v-if="curForm.id == i.id" style="margin:10px">
                <urlForm :form="curForm" @confirm="updateConfirm($event, idx)" @cancel="curForm = {}" />
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import * as _ from "lodash";
import axios from "axios";
import urlForm from "./components/urlForm.vue";
import { setStore, getStore } from '@/utils/store'
const collapseActiveName = ref("custom");
const curForm = ref({});
const addShow = ref(false);
const confList = ref([])
console.log(getStore({ name: 'confList', }), getStore({ name: 'curForm', }), getStore({ name: 'addShow', }), 'asdasdas');

confList.value = getStore({ name: 'confList', }) || []
curForm.value = getStore({ name: 'curForm', }) || {}
addShow.value = getStore({ name: 'addShow', }) || false
// 初始化拿localStorage 给 confList
watch(
  () => confList.value,
  (newVal) => {
    setStore({
      name: 'confList',
      content: newVal
    })
  },
  { deep: true }
)
watch(
  () => curForm.value,
  (newVal) => {
    setStore({
      name: 'curForm',
      content: newVal
    })
  },
  { deep: true }
)

watch(
  () => addShow.value,
  (newVal) => {
    setStore({
      name: 'addShow',
      content: newVal
    })
  },
  { deep: true }
)

onMounted(() => {
  console.log(12313123123123123123)
})
// 生成唯一id
const generateUniqueId = () => {
  const timestamp = Date.now();
  const randomNum = Math.random() * Math.pow(10, 17);
  const uniqueId = `${timestamp}-${randomNum}`;
  return uniqueId;
};
// 新增
const addHandle = () => {
  curForm.value = {};
  curForm.value.id = generateUniqueId();
  addShow.value = true;
};
const cancel = () => {
  curForm.value = {};
  addShow.value = false;
};

const updateHandle = (e) => {
  addShow.value = false;
  curForm.value = _.cloneDeep(e);
};
const addConfirm = (e) => {
  confList.value.unshift(e);
  cancel()
};
const updateConfirm = (e, idx) => {
  confList.value[idx] = e
  curForm.value = {}
};
</script>

<style>
.main_app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 500px;
}

.display-flex {
  display: flex;
}

.algin-items-center {
  align-items: center;
}

.url-item {
  border-radius: 5px;
  background: #4d97d8;
  padding: 10px;
  color: #fff;
  margin-bottom: 5px;
}

.hx-hover {
  position: relative;
}

.hx-hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px dashed #8149c1;
  background-color: rgba(28, 112, 237, 0.5);
  /* 这里设置遮罩的颜色和透明度 */
}
</style>
